<template>
  <Modal :value="visible" title="人员信息" @on-visible-change="setVisibility">
    <Spin fix v-if="loading"></Spin>
    <div class="member-detail" v-if="current">
      <div class="member-detail__img">
        <img v-if="imgUrl" :src="imgUrl" alt="人脸照片">
      </div>
      <div class="member-detail__detail">
        <div class="margin-bottom-20">姓名: {{current.name}}</div>
        <div class="margin-bottom-20" v-show="telephone">手机号码: {{telephone}}</div>
        <div class="margin-bottom-20" v-show="current.idCard">证件号码: {{current.idCard}}</div>
      </div>
    </div>
    <Row slot="footer">
      <Button type="text" @click="setVisibility(false)">取消</Button>
    </Row>
  </Modal>
</template>

<script>
import File from '@/libs/file'
import { http, api } from '@/libs/http'

export default{
  props: {
    visible: false,
    fileName: String,
    userId: Number,
    roleId: Number,
    faceId: Number,
    clientId: Number,
    name: String,
    phone: String
  },
  data () {
    return {
      imgUrl: '',
      current: null,
      loading: false
    }
  },
  computed: {
    telephone () {
      const { current } = this
      if (!current) return ''
      return current.phone || current.telephone
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchMember()
      } else {
        this.imgUrl = ''
      }
    }
  },
  methods: {
    setVisibility (val) {
      this.$nextTick(() => {
        this.$emit('update:visible', val)
      })
    },
    async fetchMember () {
      try {
        this.loading = true
        const { fileName, userId, roleId, clientId, faceId, name, phone } = this
        let detail = {}
        if (name || phone) {
          detail.name = name
          detail.phone = phone
          if (!!userId && !!roleId) {
            const { identity_number, id_card } = await this.fetchMemberInfo(userId, roleId, clientId)
            detail.idCard = identity_number || id_card
          }
          this.current = detail
          this.imgUrl = await File.getFileUrl(fileName || faceId, !!fileName)
        } else if (!!userId && !!roleId) {
          detail = await this.fetchMemberInfo(userId, roleId, clientId)
          if (!detail) return
          this.current = detail
          detail.idCard = detail.identity_number || detail.id_card
          this.imgUrl = await File.getFileUrl(fileName || faceId || detail.face_file_id, !!fileName)
        }
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },
    fetchMemberInfo (user_id, role_id, client_id) {
      console.log(this, api.tenant_detail, null, { user_id, role_id, client_id })
      return http.fetch(this, api.tenant_detail, null, { user_id, role_id, client_id })
    }
  }
}
</script>

<style lang="less" scoped>
    .member-detail{
        display: flex;

        &__img{
            position: relative;
            width: 190px;
            height: 240px;
            background-color: #f3f3f3;
            margin-right: 20px;

            & > img{
                position: absolute;
                max-width: 100%;
                max-height: 100%;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
</style>